<template>

    <div class="page-content">

        <!-- 生产统计下的页面每个页面都要引入这个组件 -->
        <dovecote-info></dovecote-info>
        <!-- <span>请选择月份和类型：</span> -->
        <!-- 表格头部 -->
        <table-bar :columns="columns" @changeColumn="changeColumn">
            <div slot="top">
                <el-form label-width="4.375rem">
                    <el-row :gutter="8">

                    </el-row>
                    <el-form label-width="100rem">
                        <el-row>
                            <el-col :span="5">
                                <el-row :gutter="20">
                                    <el-col :xs="24" :sm="12" :lg="6">
                                        <!-- 日期选择器 -->
                                        <div class="block">

                                            <el-col :span="7">
                                                <div class="block">

                                                    <el-date-picker v-model="dateValue" @change="pickDate" type="month" value-format="yyyy-M" placeholder="选择月">
                                                    </el-date-picker>
                                                </div>
                                            </el-col>
                                        </div>

                                    </el-col>

                                </el-row>
                            </el-col>
                            <el-col :span="7">
                                <el-row :gutter="20">

                                    <el-col :xs="24" :sm="12" :lg="6">
                                        <!-- 图表区域 -->

                                        <!-- 选择月结对象 -->
                                        <el-select v-model="value" placeholder="请选择月结对象" @change="chooseType">
                                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.label">
                                            </el-option>
                                        </el-select>

                                    </el-col>

                                </el-row>
                            </el-col>
                            <!-- <el-button type="primary" @click="pickDate">搜索</el-button> -->
                        </el-row>
                    </el-form>


                </el-form>
            </div>

            <!-- 切换按钮 -->
            <el-tooltip slot="button1" effect="dark" content="数据图表" placement="top-start">

                <el-button icon="el-icon-pie-chart" size="small" @click="cut()" />
            </el-tooltip>
        </table-bar>

        <!-- 图表 -->
        <div v-if="!dataList&&!pageShow">
            <!-- 图表区域 -->
            <el-row :gutter="8">
                <!--柱状图 -->
                <el-col :span="10">
                    <el-card class="card box-card">
                        <div slot="header" class="clearfix">
                            <i style="font-size:18px"></i>
                            <!-- <span>类型</span> -->
                        </div>
                        <echart-pmouth1 />
                    </el-card>
                </el-col>
                <!--  折线图 -->
                <el-col :span="14">
                    <el-card class="card box-card">
                        <echart-pmouth />
                    </el-card>
                </el-col>
            </el-row>
        </div>


        <!-- 表格区域 -->
        <the-table :data="allList" :showPage="false" ref="table" v-show="dataList&&pageShow" v-if="shuxin">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="总数" prop="total" v-if="columns[0].show" />
            <el-table-column label="鸽蛋（个）" prop="鸽蛋" v-if="columns[1].show" />
            <el-table-column label="五两鸽（只）" prop="五两鸽" v-if="columns[2].show" />
            <el-table-column label="六两鸽（只）" prop="六两鸽" v-if="columns[3].show" />

            </el-table-column>
            </el-table-column>
        </the-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="cagePageNum" :page-sizes="[1,2,5,10]"
            :page-size="cagePageSize" layout="total, sizes, prev, pager, next, jumper" :total=cageTotal v-if="pageShow">
        </el-pagination>



    </div>
</template>

<script>
    import echartTwo from "../../../components/Dovecote/InfoManage/echartTwo.vue";
    import { getChartsByType } from "@/api/Dovecote/ProductionCount/PMouthChart.js";
    import echartPmouth from '../../../components/Dovecote/ProductionCount/echartPmouth.vue';
    import echartPmouth1 from '../../../components/Dovecote/ProductionCount/echartPmouth1.vue';
    import { mapState } from "vuex";
    import {
        getAllInfoByPage,
        getInfoByType,
        deleteOrder,
        getByDateInfo,
        getInfoByBatch,
        editOrder,
        getDayInfo,
        getInfo,
        AmountByDate,
        PMonth
    } from "@/api/Dovecote/ProductionCount/Meat_Pigeon_Out.js";
    import { getAllCage } from "@/api/common.js";
    export default {
        name: "PMouthChart",
        meta: {
            title: "月结报表",
        },
        components: {
            echartPmouth,
            echartTwo,
            echartPmouth1
        },
        data() {
            return {
                //分页是否显示
                pageShow: true,
                cageTotal: 1,
                //分页编号
                cagePageNum: 1,
                //分页数据条数
                cagePageSize: 5,

                tooltip: {
                    trigger: 'axis'
                },
                //人员组成
                roleOption: {
                    tooltip: {},
                    xAxis: {
                        data: ['五两鸽', '六两鸽', '鸽蛋']
                    },
                    yAxis: {},
                    series: [{
                        type: 'bar',
                        data: [25, 46, 12]
                    }]
                },
                columns: [
                    {
                        name: "总数",
                        show: true,
                    },
                    {
                        name: "鸽蛋",
                        show: true,
                    },
                    {
                        name: "五两鸽",
                        show: true,
                    },
                    {
                        name: "六两鸽",
                        show: true,
                    },

                ],
                //列表的形式展示
                dataList: true,




                shuxin: false,
                dateValue: "2021-9",
                query: {
                    baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
                    type: "鸽蛋",
                    year: '',
                    month: ''

                },
                query1: {
                    baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
                    type: "肉鸽",
                    year: '',
                    month: ''
                },

                //分类
                searchType: {
                    baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
                    dovecoteNumber: "A01",
                    type: "肉鸽",
                },
                //根据时间筛选
                searchByDate: {
                    baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
                    type: "鸽蛋",
                    year: "",
                },
                //获取当年月份
                year: '',


                MonthList: [],
                allList: [],
                allList1: [],
                dialogVisible: false,

                textValue: {
                    baseId: 3,
                    type: "",
                    year: 2021,
                    month: 9
                },

                layout: "refresh",
                //下拉框配置
                options: [

                    {
                        value: "肉鸽",
                        label: "肉鸽",
                    },
                    {
                        value: "鸽蛋",
                        label: "鸽蛋",
                    },

                ],

                //下拉框默认值
                value: "肉鸽",
                // options: [{
                //   value: '选项1',
                //   label: '黄金糕'
                // }, {
                //   value: '选项2',
                //   label: '双皮奶'
                // }, {
                //   value: '选项3',
                //   label: '蚵仔煎'
                // }, {
                //   value: '选项4',
                //   label: '龙须面'
                // }, {
                //   value: '选项5',
                //   label: '北京烤鸭'
                // }],
                // value: '',
                searchData: {
                    baseId: JSON.parse(window.sessionStorage.getItem("BaseInfo")).id,
                    type: '',
                    year: '',
                    month: ''
                },


                // allList: [],
                MonthList: [],
            };
        },
        created() {
            this.setAllList();
            this.init();
            this.selectTrigger();
            this.chooseType();
            // this.chooseType1();



        },
        mounted() {
            //获取当年年份
            this.getCurrentYear()

        },
        computed: {
            ...mapState({
                dovecoteNumber: (state) =>
                    state.Usersetting.CurrentDovecote.dovecoteNumber,
            }),
        },
        watch: {
            dovecoteNumber(val) {
                console.log("鸽棚", val);
                this.searchType.dovecoteNumber = val;
                this.searchType.pageSize = 10;
                this.searchType.pageNum = 1;
                this.setAllList(val);

            },
        },
        methods: {

            //设A01为初始鸽笼号
            async init() {

                this.searchType.baseId = parseInt(this.searchType.baseId);
                console.log(this.searchType.baseId);
                await getAllCage({ baseId: this.searchType.baseId }).then((res) => {
                    if (res.data.statusCode === 20000) {
                        console.log(res);
                        console.log('end')
                        // this.options = res.data.data;
                        // if (this.options.length > 0) {
                        //   this.searchType.dovecoteNumber = this.options[0].dovecoteNumber;
                        //   this.setAllList();
                        // }
                    } else {
                        return this.$message.error("获取鸽棚选项错误");
                    }
                });
            },

            // 根据鸽棚号获取数据
            async setAllList(e) {
                // console.log(e.dovecoteNumber);
                // console.log("鸽棚为：",this.searchType.dovecoteNumber);
                // this.searchType.dovecoteNumber = e;
                this.selectTrigger();
            },


            //获取当年年份
            getCurrentYear() {
                let date = new Date();
                let y = date.getFullYear();
                this.time = y;
                // console.log(y)
            },

            async selectTrigger() {
                console.log('ad', this.searchType.dovecoteNumber);
                // console.log("e"+e);
                // this.textValue.year = Data.now();
                // console.log(this.textValue.year);
                this.textValue.type = this.value;
                //  const { data: res } = await this.$http.get(`/breed/shipmentOutBill/getMonthly?`+"baseId="+this.textValue.baseId+"&type="+this.textValue.type+
                //  "&year="+this.textValue.year+"&month="+this.textValue.month);
                let date = this.dateValue.split('-');
                this.query.year = date[0];
                this.query.month = date[1];
                this.query1.year = date[0];
                this.query1.month = date[1];
                console.log('参数', this.query);
                console.log('参数', this.query1);
                const { data: res } = await PMonth(
                    this.query
                );
                // const{data : res} = await this.$http.get()
                console.log("请求到的列表", res);
                if (res.statusCode !== 20000) {
                    this.$message.error("查询数据失败");
                } else {
                    console.log('里面')
                    // console.log("编号为："+res.data.dovecoteNumber);
                    let array = [];
                    for (let key in res.data) {
                        let obj = res.data[key];
                        array.push(obj)
                    }
                    console.log(array);
                    this.allList = array;
                    // console.log(this.MonthList )
                }

                const { data: res1 } = await PMonth(
                    this.query1
                );
                // const{data : res} = await this.$http.get()
                console.log("请求到的列表", res1);
                if (res.statusCode !== 20000) {
                    this.$message.error("查询数据失败");
                } else {
                    console.log('里面1')
                    // console.log(res1.data[0].dovecoteNumber)
                    // for(var i=0; i<res1.data.length;i++){

                    // }

                    let array = [];
                    for (let key in res1.data) {
                        let obj = res1.data[key];
                        array.push(obj)
                    }
                    console.log(array);
                    var a = [{}];

                    if (this.searchType.dovecoteNumber === "A01") {
                        a[0] = array[0]
                        this.allList = a;
                    } else if (this.searchType.dovecoteNumber === "A02") {
                        a[0] = array[1]
                        this.allList = a;
                    } else if (this.searchType.dovecoteNumber === "A03") {
                        a[0] = array[2];
                        this.allList = a;
                    } else {
                        this.allList = array;
                    }
                    console.log('测试', this.searchType.dovecoteNumber);
                    // this.allList = array;
                    // console.log(this.MonthList )
                    // this.cageTotal = res.data[0].total;
                    console.log(this.cageTotal)
                }



                this.dialogVisible = true
                // console.log(value)
            },

            //根据时间筛选数据
            async pickDate(e, f) {
                console.log("时间", e);
                let tempDate = e.split("-");
                console.log(tempDate);
                this.query.year = tempDate[0];
                this.query.month = tempDate[1];
                this.query1.year = tempDate[0];
                this.query1.month = tempDate[1];
                console.log(this.query);
                console.log(this.query1);
                if (!e) {
                    this.selectTrigger();
                } else {
                    // this.searchByDate.date = e;
                    // console.log()
                    const { data: res } = await PMonth(this.query);
                    console.log("请求到的列表", res);
                    console.log('end')
                    let array = [];
                    for (let key in res.data) {
                        let obj = res.data[key];
                        array.push(obj)

                        // if (res.statusCode !== 20000) {
                        //   this.$message.error("查询数据失败");
                        // } else {
                        //   this.allList = res.data;
                        // }
                        // console.log(this.allList)
                    }
                    console.log(array);
                    var a = [{}];

                    if (this.searchType.dovecoteNumber === "A01") {
                        a[0] = array[0]
                        this.allList = a;
                    } else if (this.searchType.dovecoteNumber === "A02") {
                        a[0] = array[1]
                        this.allList = a;
                    } else if (this.searchType.dovecoteNumber === "A03") {
                        a[0] = array[2];
                        this.allList = a;
                    } else {
                        this.allList = array;
                    }
                    console.log(array)
                }

            },

            //根据类型筛选数据
            async chooseType(value) {
                this.shuxin = false;
                const { data: res } = await PMonth(this.query);
                console.log("请求到的列表", res);
                // console.log(this.query.type)
                console.log(this.value)  //label
                console.log('end')
                // console.log('数据'+this.value)
                // console.log(this.options[1].value)

                if (this.value == this.options[0].value) {
                    // this.query.type ='肉鸽'
                    // console.log("换成肉鸽")
                    const { data: res1 } = await PMonth(this.query1);
                    console.log("请求到的列表", res1);
                    // console.log(res.data[0].total)
                    this.shuxin = true;
                    if (res1.statusCode !== 20000) {
                        this.$message.error("查询数据失败");
                    } else {
                        // console.log('里面')
                        console.log(res1.data)
                        let array1 = [];
                        for (let key in res1.data) {
                            let obj = res1.data[key];
                            array1.push(obj)
                        }
                        console.log(array1);
                        var a = [{}];

                        if (this.searchType.dovecoteNumber === "A01") {
                            a[0] = array1[0]
                            this.allList = a;
                        } else if (this.searchType.dovecoteNumber === "A02") {
                            a[0] = array1[1]
                            this.allList = a;
                        } else if (this.searchType.dovecoteNumber === "A03") {
                            a[0] = array1[2];
                            this.allList = a;
                        } else {
                            this.allList = array1;
                        }
                        // console.log(this.MonthList )
                    }
                }

                else if (this.value == this.options[1].value) {
                    const { data: res } = await PMonth(this.query);
                    console.log("请求到的列表", res);
                    if (res.statusCode !== 20000) {
                        this.$message.error("查询数据失败");
                    } else {
                        // console.log('里面')
                        console.log(res.data)
                        let array = [];
                        for (let key in res.data) {
                            let obj = res.data[key];
                            array.push(obj)
                        }
                        console.log(array);
                        var a = [{}];

                        if (this.searchType.dovecoteNumber === "A01") {
                            a[0] = array[0]
                            this.allList = a;
                        } else if (this.searchType.dovecoteNumber === "A02") {
                            a[0] = array[1]
                            this.allList = a;
                        } else if (this.searchType.dovecoteNumber === "A03") {
                            a[0] = array[2];
                            this.allList = a;
                        } else {
                            this.allList = array;
                        }
                        // console.log(this.MonthList )
                    }
                    this.shuxin = true;
                    // console.log("换成鸽蛋")


                }
                // console.log(this.query)
                // let type1 = this.query.type;
                // console.log("type1"+type1)

                this.shuxin = true;

            },

            //切换显示方式
            cut() {
                let that = this;
                that.dataList = !that.dataList;
                that.pageShow = !that.pageShow;
            },
            //表格数据筛选
            changeColumn(columns) {
                this.columns = columns;
                this.$refs.table.doLayout();
            },

            //改变分页当前页码
            handleCurrentChange(newPage) {
                let that = this;
                that.cagePageNum = newPage;


            },

            //改变分页显示条数
            handleSizeChange(newSize) {
                let that = this;
                that.cagePageSize = newSize;


            },

        },
    };
</script>

<style>
    .el-pagination {
        text-align: center;
    }

    .el-card {
        min-height: 100%;
        height: 100%;
    }

    .card {
        width: 100%;
        height: 400px;
        .clearfix {
            padding-left: 5px;
            border-left: 5px solid #3296fa;
        }

    }
</style>